<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="height: 100%">
 <script type="text/javascript" src="./js/echarts.min.js"></script>
 <!-- 引入jquery.js -->
 <script type="text/javascript" src="./js/jquery.js"></script>
<meta charset="utf-8"/>
<script type="text/javascript">
function check(){
	    var name = document.getElementById("inputPage").value;	  
	     if(name ==  null || name == ''){
	          alert("跳转不能为空");
	         return false;
	     }
	    return true;
	  }
	  
/* function jump_to(index){  
    var regexp=/^\d+$/;  
    if(!regexp.test(index)){  
        alert("请输入 正确的数字！");  
        return false;  
    }else{  
        page_nav(index);  
    }    
      
}   */
</script> 
<script type="text/javascript">
function beforeSubmit(form){
if(form.secid.value==''){
alert('股票ID不能为空！');
form.secid.focus();
return false;
}
if(form.opentime.value==''){
alert('开始时间不能为空！');
form.opentime.focus();
return false;
}
if(form.closetime.value==''){
alert('结束时间不能为空！');
form.closetime.focus();
return false;
}
if(form.type.value=='') {
alert('类型不能为空！');
form.type.focus();
return false;
}
return true;
}
</script>  
<%-- <script  type="text/javascript">

var msc = '<%=session.getAttribute("msc")%>';
  if(msc!=="null"){
	  alert(msc);
	  } 
</script> --%>


</head>

<body>
<h2>上证信息</h2>
   <!-- 定义四个选项 -->
<form action="sec_code.do?method=insertAll&sec_code=${mm1.sec_code}" name="form" method='post' onSubmit="return beforeSubmit(this);">
<div>
股票ID<input id="guid" type="text"  name="secid" value="${mm1.secid}"/>
开始时间<input id="start" type="text" name="opentime" />  
结束时间<input id="end" type="text" name="closetime"/> 
类型<select id="type" name="type">
  <option>a</option>
  <option>b</option>
  <option>c</option>
  <option>d</option>
</select>
<input type="submit"  name="button" value="提交"/>
<input type="reset"  name="button2"  value="清空"/>
</div>
</form>
    	<!-- <form action="tbl_market.do?method=getId" method="post" onsubmit="return check()">
			股票ID:<input type="text" name="secid" id="secid"/>	
			<input type="submit"  value="查询"/>			
		</form> -->
    	
			<tr>
				<td>
					股票ID ${mm1.secid}
				</td>
				<td>
					股票代码 ${mm1.sec_code}
				</td>
				<td>
					股票日期 ${mm1.tradedate}
				</td>
				
			</tr>
			<table  width="60%" border="1" id='tbodyID'>
			<tr>
			   
				<td>
					股票ID
				</td>				
				<td>
					操作
				</td>
			</tr>
			 <c:forEach items="${listFenYe}" var="s">
				<tr >
					
					<td>
						${s.secid }
					</td>
					
					
					<td id="center"  >
					
					<a href="tbl_market.do?method=xiayitiao&secid=${s.secid }">查询</a>			      
			      
				</tr>
			</c:forEach> 
		</table>
		<a href="tbl_market.do?method=xiayiye&index=1">第一页</a>
		<a href="tbl_market.do?method=xiayiye&index=${page.index-1 }">上一页</a>
		<a href="tbl_market.do?method=xiayiye&index=${page.index+1 }">下一页</a>
		<a href="tbl_market.do?method=xiayiye&index=${page.count }">末页</a>
		共<td> ${page.count }</td>条	
	    <form action="tbl_market.do?method=getId" method="post" onSubmit="return check();">
	     <span class="page-go-form"><label>跳转至</label>  
         <input type="text" name="index" id="inputPage" class="page-key" />条  
         <input type="submit" value="GO"/>	
         </span>  										
        </form>			
 <!-- 显示Echarts图表 -->
        <div style="height:410px;min-height:100px;margin:0 auto;" id="main"></div>                        
        <script type="text/javascript">       
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));     
        // 画图表空出数据等待ajax传值
       myChart.setOption({
            title: {    //图表标题
                text: ''
            },
            tooltip: {
                trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中        
               
                axisPointer: {
                	type: 'cross'//十字指示              	
                   
                }
            },  
            axisPointer: {   
                link: [{
                    xAxisIndex: [0, 1] //生成大十字轴
                }]
            },
            grid: [{        //图形间距
                left: '5%',
                right: 20,
                top: 40,
                height: 180
            }, {
                left: '5%',
                right: 20,
                height: 80,
                top: 260
            }],
         
            dataZoom: [   //滚动条      控制两条x轴                
         	              {
                                type: 'inside',
                                top: '95%',
                                xAxisIndex:[0,1], 
                                height: 20,
                                start: 20,
                                end: 100
         	               } ,
         	               {
                    	            type: 'slider',
                                    xAxisIndex:[0,1],                                  
                                    start: 20,
                                    end: 100
                 	               } 
                 
            ],
            legend: {    //图表上方的类别显示               
                show:true,
                data:['现价','成交量']
            },
            color:[
                   '#FF3333',   
                   '#53FF53',    
                   '#B15BFF',   
                   '#68CFE8',   
                   '#FFDC35'   
                   ],
            toolbox: {    //工具栏显示             
                show: true,
                feature: {                
                    saveAsImage: {}        //显示“另存为图片”工具
                }
            },
            calculable : true,  

            xAxis: [{
                type: 'category',
                data: [],
                scale: true,
                boundaryGap: false,
                axisLine: { onZero: false },
                splitLine: { show: false },
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            },{
                type: 'category',
                scale: true,
                gridIndex:1,
                data: [] ,
                axisLabel: {show: false} 
            }
            ],
        
             yAxis : [ 
                        {                           
                        	 scale: true, //数据居中
                             splitArea: {
                                show: true
                              },
                              
                             type : 'value',
                             name : '现价',                           
                             splitNumber:10,//分行
                             axisLabel : {
                                 formatter: '{value}元'    //控制输出格式

                             }
                         },{   scale: true, //数据居中
                             splitArea: {
                                 show: true
                               },
                             gridIndex:1,
                             splitNumber: 2 ,
                             axisLine: {onZero: false},
                             axisTick: {show: false},
                             splitLine: {show: false},
                             axisLabel: {show: true} 
                         }
                     
            ], 
            series : [    //系列（内容）列表   
                          
                        {   
                            name:'现价',
                            type:'line',    //折线图表示（生成温度曲线）
                            symbol:'emptycircle',    //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形                        
                            data:[]        //数据值通过Ajax动态获取
                        },
                        {  
                            name:'成交量',
                            type:'bar',
                            xAxisIndex:1,
                            yAxisIndex:1,
                            barWidth: 10,
                            itemStyle: {
                                
                            },
                            symbol:'emptyrect',
                            data:[]
                        }
                       
            ]
        });
         
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
         
         var lastpx=[];        //现价数组
         var trade_vol=[];        //成交量数组
         var time=[];        //时间数组
         
         $.ajax({    //使用JQuery内置的Ajax方法
         type : "post",        //post请求方式
         async : true,        //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         url : "tbl_market.do?method=getAll",    //请求发送到ShowInfoIndexServlet处
      //   data : {name:"A0001"},        //请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
         dataType : "json",        //返回数据形式为json
         success : function(result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象
             if (result != null && result.length > 0) {
                    for(var i=0;i<result.length;i++){       
                    	lastpx.push(result[i].lastpx);        //挨个取出
                    	trade_vol.push(result[i].trade_vol);                     
                    	time.push(result[i].time);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    
                    myChart.setOption({        //载入数据
                     
                        xAxis: [{
                           
                        	data: time    //填入X轴数据
                           
                        },{
                           
                        	data: time    //填入X轴数据
                           
                        }],
                        series: [    //填入系列（内容）数据
                                      {
                                    // 根据名字对应到相应的系列
                                    name: '现价',
               
                                    data: lastpx
                                },
                                      {
                                	// xAxisIndex:1,
                                    // yAxisIndex:1,
                                	 name: '成交量',                                                                
                                     data: trade_vol
                                }
                       ]
                    });
                    
             }
             else {
                 //返回的数据为空时显示提示信息
                 alert("图表请求数据为空，可能服务器暂未录入近五天的观测数据，您可以稍后再试！");
                   myChart.hideLoading();
             }
         
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
             alert("图表请求数据失败，可能是服务器开小差了");
             myChart.hideLoading();        
         }
    }),

    myChart.setOption(option);    //载入图表 
  //处理点击事件并且跳转到相应的百度搜索页面
      var start=[];
      var end=[];
      myChart.on('click', function (params) {

     
    	   if (confirm("确认为起始时间取消为关闭时间")) {
    		  //start.push(params.name);
    	   var starts=JSON.stringify(params.name);
    	 // var starts=JSON.stringify(start);
    	  // alert("开始时间"+starts);
    	   var newStr = starts.replace("\"","").replace("\"","");
    	   document.getElementById("start").value=newStr;

    	   }
    	   else {
    		   var ends=JSON.stringify(params.name);
    		  // alert("关闭时间"+ends);
    		   var end = ends.replace("\"","").replace("\"","");
    		   document.getElementById("end").value=end;
    	   
    	   }

    });  
        </script>
 
</body>
</html>
